<{include file='top.html'}>
</head>
<body style="background:#75c4fc;">
<div class="turnplateBg" style="background: url(<{$data.baseImg}>) no-repeat;background-size:100% 100%;">
    <a class="returned left_link" href="javascript:void(0);">返回</a>
    <div class="turnplate_box">
        <div class="zhuanBg">
            <div id="myCanvas"></div>
            <div id="myCanvas1">
                <{foreach from=$data.prizeInfo key=key item=item}>
                    <img class="ng_Zpimg_img<{$key+1}> ng-Zpimg" src="<{$item.prizePic}>"  alt="<{$item.prizeRank}>" />
                <{/foreach}>
            </div>
        </div>
        <a id="tupBtn" class="turnplatw_btn"></a>
        <dl class="turnplateNub">每次消耗<i><span id="costPoint" style="font-size: 1.8rem;"><{$data.basePoint}></span></i>积分</dl>
        <dl class="turnplateNub turnplateNubLfet">您有积分：<i><span id="point" style="font-size: 1.8rem;"><{$point}></span></i></dl>
        <dl class="turnplaterule"><a href="javascript:void(0);" class="trigger">活动规则</a></dl>
        <div class="turnplateBtn">
            <a href="<{U('User/luckyPrize')}>&type=3" class="MyPrize"></a>
            <a href="<{U('SignLucky/prizeIntroduce')}>&type=3" class="ActRule"></a>
        </div>
    </div>
</div>
<!--活动规则弹出框-->
<div class="popup InstructionsBox">
    <h3>使用说明</h3>
    <table class="InstructionsCon">
        <{if $data.rule}>
            <{foreach from=$data.rule item=item}>
                <tr>
                    <td><{$item}></td>
                </tr>
            <{/foreach}>
        <{/if}>
    </table>
</div>
<!--抽取实物地址验证-->
<div class="Zpcfrm" id="checkAddress" style="display: none;">
    <div class="Zpcfrm_p">
        <p class="Zpcfrm_p_tit" id="title">确认地址</p>
        <p class="Zpcfrm_p_cont" id="content">您尚未完善收货地址信息<br>这将导致您无法正常收货</p>
    </div>
    <div class="Zpcfrm_sub">
        <!--<span class="Zpcfrm_sub_cel"><a href="javascript:void(0)">取消</a></span>-->
        <span class="Zpcfrm_sub_sure"><a href="<{U('User/info')}>">去完善地址</a></span>
    </div>
</div>
<{include file="signBody.html"}>
</body>
</html>
<script type="text/javascript" src="<{$preStaticUrl}>Wap/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="<{$preStaticUrl}>Wap/js/flexible.js"></script>
<script type="text/javascript" src="<{$preStaticUrl}>Wap/js/main.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //旋转角度
        var angles;
        //可抽奖次数
        var clickNum = "<{$data['luckyTimes']}>";
        //基础积分
        var basePoint = "<{$data['basePoint']}>";
        //现有积分
        var point = $("#point").text();
        //旋转次数
        var rotNum = 0;
        //中奖公告
        var result = null;
        $('#tupBtn').one('click', function () {
            doLucky();
        });

        //抽奖
        function doLucky(){
            if (clickNum >= 1) {
                //后台处理中奖过程
                var url = "<{U('SignLucky/getLuckyPrize')}>";
                var param = {'type':3};
                $.getJSON(url, param , function (data) {
                    console.log(data);
                    if (data.status == 1) {
                        alert(data.msg);
                        return false;
                    } else {
//                        console.log(data);
                        switch (data.msg) {
                            case "1":
                                result = "恭喜你，获得“一等奖”<br/>" + data.note;
                                break;
                            case "2":
                                result = "恭喜你，获得“二等奖”<br/>" + data.note;
                                break;
                            case "3":
                                result = "恭喜你，获得“三等奖”<br/>" + data.note;
                                break;
                            case "4":
                                result = "恭喜你，获得“四等奖”<br/>" + data.note;
                                break;
                            case "5":
                                result = "恭喜你，获得“五等奖”<br/>" + data.note;
                                break;
                            case "0":
                                result = "很遗憾，未抽中。<br/>下次再接再厉哦！";
                                break;
                        }
                        //转盘旋转
                        runCup(data.angle);
                        //旋转次数加一
                        rotNum = rotNum + 1;
                        //可抽奖次数减一
                        clickNum = clickNum - 1;
                        $('#point').text(point-basePoint);
                        setTimeout(function () {
                            if(data.address == 1){
                                $('#title').html(result);
                                $('#checkAddress').css('display','block');
                            } else{
                                alert(result);
                            }

                            $('#tupBtn').one('click',function(){
                                doLucky();
                            });
                        }, 6000);
                    }
                });
            }
            else {
                if(point >= basePoint){
                    layer.msg("该功能配置出错，请稍后再试");
                } else{
                    layer.msg("您的积分不足，快去赚取积分吧");
                }
            }
        }

        //转盘旋转
        function runCup(i) {
            var num =0;
            if(i==1)  num = 1800;
            else if(i==2) num = 2100;
            else if(i==3) num = 2040;
            else if(i==4) num = 1980;
            else if(i==5) num = 1920;
            else num = 1860;
            angles = 2160 * rotNum + num;
            var degValue = 'rotate(' + angles + 'deg' + ')';
            $('#myCanvas').css('-o-transform', degValue);           //Opera
            $('#myCanvas').css('-ms-transform', degValue);          //IE浏览器
            $('#myCanvas').css('-moz-transform', degValue);         //Firefox
            $('#myCanvas').css('-webkit-transform', degValue);      //Chrome和Safari
            $('#myCanvas').css('transform', degValue);
            $('#myCanvas1').css('-o-transform',degValue);           //Opera
            $('#myCanvas1').css('-ms-transform',degValue);          //IE浏览器
            $('#myCanvas1').css('-moz-transform',degValue);         //Firefox
            $('#myCanvas1').css('-webkit-transform',degValue);      //Chrome和Safari
            $('#myCanvas1').css('transform',degValue);
        }

        //open popup
        $('.trigger').on('click', function(event){
            event.preventDefault();
            $('.popup').addClass('is-visible');
        });

        //close popup
        $('.popup').on('click', function(event){
            $(this).removeClass('is-visible');
        });
    });

</script>

<script>
    //遮罩层
    $(document).ready(function(){
        var temp;
        if(
                $(".Zpcfrm").is(":hidden")//是否隐藏
        ){
            $(".turnplateBg").removeClass("hid");
            $(".InstructionsBox").removeClass("hid");
        }else{
            console.log("Flase");
            $(".turnplateBg").addClass("hid");
            $(".InstructionsBox").addClass("hid");
        }
        $(".Zpcfrm_sub_cel").click(function(){
            $(".Zpcfrm").hide();
            $(".turnplateBg").removeClass("hid");
            $(".InstructionsBox").removeClass("hid");
        })
    });
</script>